<template>
  <div class="banner">
    <el-button @click="showDialogBanner()" type="primary">新增</el-button>
    <el-dialog title="新增banner" :visible.sync="dialogBannerVisible">
      <el-input
        type="textarea"
        :rows="20"
        placeholder="请输入内容"
        v-model="textarea">
      </el-input>
      <el-button @click="addBanner()" type="primary">保存</el-button>
    </el-dialog>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column prop="backgroundImg" label="类型">
        <template scope="scope">
          <div class="banner-gallery">
            <img :src="scope.row.bannerInfo.backgroundImg"/>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createDate" label="创建日期"></el-table-column>
      <el-table-column prop="bannerInfo.title" label="标题"></el-table-column>
      <el-table-column prop="_id" label="id"></el-table-column>
      <el-table-column prop="_id"label="查看">
        <template scope="scope">
          <el-button @click="openBanner(scope.row._id)" type="text" size="small">打开地址</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="_id" label="删除">
        <template scope="scope">
          <el-button @click="deleteBanner(scope.$index)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    name: 'index',
    components: {
    },
    data () {
      return {
        textarea: JSON.stringify({
          bannerInfo: {
            title: '英伦对决',
            type: 0,
            backgroundImg: '//yaolai-img.oss-cn-beijing.aliyuncs.com/OSS/2017/10/10/banner1010_film.jpg',
            btns: [{
              style: 'width: 3.3rem; height: .6rem; top: 8.53rem; left: .66rem;',
              href: '//m2.yaolaivip.com/movie/#/detail?id=001206572017'
            }, {
              style: 'width: 3.3rem; height: .6rem; top: 8.53rem; left: .66rem;',
              href: '//m2.yaolaivip.com/movie/#/detail?id=001206572017'
            }]
          }
        }, undefined, 4),
        dialogBannerVisible: false,
        tableData: []
      }
    },
    methods: {
      openBanner (id) {
        window.open(`/node/action/banner/${id}`)
      },
      showDialogBanner () {
        this.dialogBannerVisible = true
      },
      addBanner () {
        axios.post('/node/api/banner', JSON.parse(this.textarea)).then(resp => {
          this.tableData.push(resp.data)
          this.dialogBannerVisible = false
        })
      },
      deleteBanner (index) {
        this.$confirm('警告，确认删除？').then(() => {
          let id = this.tableData[index]._id
          axios.delete(`/node/api/banner/${id}`, {
          }).then(resp => {
            this.tableData.splice(index, 1)
          })
        })
      }
    },
    mounted () {
      let _this = this
      axios.get('/node/api/banner').then(resp => {
        _this.tableData = resp.data.data.result
      })
    }
  }
</script>
<style lang="less" scoped>
  .banner-gallery {
    height: 160px;
    overflow: hidden;
  }
</style>